<template>
	<view class="container">
		<!-- <WarnInfo :image="warnIcon" :title="warnTitle"></WarnInfo> -->
		<view class="common_container">
			<view class="img">
				<image :src="warnIcon" class="icon" mode=""></image>
			</view>
			
			<view>{{warnTitle}}</view>
			
		</view>
		<view class="center">
			<view class="order_info">
				<view class="info_title flex_start">
					<image :src="addressIcon" class="address_icon" mode=""></image>
					<view class="flex_start address_box">
						<view class="" @click="goto(1)">上车地点: {{obj.leaveArea}}</view>
					</view>
				</view>
				<view class="info_title flex_start">
					<image :src="addressIcon" class="address_icon" mode=""></image>
					<view class="flex_start address_box">
						<view class="" @click="goto(2)">到达地点: {{obj.goArea}}</view>
					</view>
				</view>
				<view class="flex_start">{{obj.leaveTime}}<view class="go">出发</view></view>
				<view class="info_tag flex_start">
					<view class="tag_item flex_start" v-if="obj.goodsType">{{obj.goodsType}}</view>
					<view class="tag_item flex_start" v-if="obj.number">人数{{obj.number}}</view>
					<view class="tag_item flex_start" v-if="obj.carType">{{obj.carType}}</view>
					<view class="tag_item flex_start" v-if="obj.size">{{obj.size}}</view>
				</view>
				<view class="info_price flex_start">{{obj.price}} <view class="company">元</view></view>
			</view>
			<view class="flex_start subhead">
				<view class="">接单要求</view>
				<image :src="tips" class="tips_icon" mode=""></image>
			</view>
			<view class="requirement">{{obj.remark}}</view>
			<image v-for="(item,i) in obj.goodsFile" :key="i" :src="item" class="requirement_img" mode=""></image>
		</view>
		<view class="line_seat"></view>
		<view class="center m_bottom" v-if="obj.hot.length > 0">
			<view class="hot_title flex_start">热门推荐</view>
			<view class="order_info recommend_area" v-for="(item,i) in 3" :key='i'>
				<view class="info_title flex_start">
					<view class="">成都金牛区兴元绿洲-成都金牛区金府国际成都金牛区金府国际成都金牛区金府国际</view>
					<image :src="del" class="del_icon" mode=""></image>
				</view>
				<view class="flex_start">2020-05-29 08:30 <view class="go">出发</view></view>
				<view class="info_tag flex_start">
					<view class="tag_item flex_start" v-for="(item,i) in tag" :key="i">{{item}}</view>
				</view>
				<view class="flex_start grabbing_box">
					<view class="info_price flex_start">20-30 <view class="company">元</view></view>
					<view class="grabbing flex_start">抢单</view>
				</view>
			</view>
		</view>
		<view class="footer_box flex_start">
			<view class="flex_start entrance">
				<view class="" @click="toIndex">
					<image src="../../static/img/index_.png" class="index_icon" mode=""></image>
					<view class="">首页</view>
				</view>
				<view class="">
					<image src="../../static/img/customer_service.png" class="customer_service" mode=""></image>
					<view class="">客服</view>
				</view>
			</view>
			<view :class="type=='user'&&obj.status==4 ? 'call btn flex_start flex_all':'call btn flex_start'" v-if="obj.status > 0" @click="call">电话沟通</view>
			<view :class="obj.status < 1 ? 'right_now btn flex_start flex_all':'right_now btn flex_start'" @click="orderGrabbing" v-if="!type">立即接单</view>
			<view :class="type=='user'&&obj.status<1 ? 'right_now btn flex_start flex_all':'right_now btn flex_start'" @click="orderGrabbing" v-if="type=='user'&&obj.status<2">取消订单</view>
			<view class="right_now btn flex_start" @click="goOn" v-if="type=='user'&&obj.status==2">确认上车</view>
			<view class="right_now btn flex_start" @click="arriveAddress" v-if="type=='user'&&obj.status==7">确认到达</view>
			<view class="right_now btn flex_start" @click="afterSale" v-if="type=='user'&&obj.status==3">申请售后</view>
			<view class="right_now btn flex_start" @click="afterSale" v-if="type=='user'&&obj.status==6">售后中</view>
			
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog title="" content="确认接单？" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import WarnInfo from "../../components/warnInfo.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			WarnInfo,
			uniPopup,
			uniPopupDialog
		},
		data() {
			return {
				id:null,
				tag:['1.5*2.0','人数2','家具'],
				warnIcon: require("../../static/img/orderDetail/tips.png"),
				tips: require("../../static/img/orderDetail/tips2.png"),
				del: require("../../static/img/orderDetail/del.png"),
				addressIcon: require("../../static/img/orderDetail/address.png"),
				warnTitle:'兼职帮提醒你，坐车一定要在平台上支付金额，线下交易如果造成财产损失兼职帮不承担任何责任',
				obj: {}
			};
		},
		onLoad(option) {
			this.id = option.id
			this.type = option.type || ''
			this.getDetail()
		},
		methods:{
			toIndex(){
				uni.switchTab({
					url:'/pages/home/home'
				})
			},
			afterSale(){ //申请售后
				this.$utils.requert({
					url: 'carUseAfter',
					type: 'post',
					data: {carUseId: this.id}
				}).then(res => {
					if (res.code === 1) {
						this.$utils.showLayer(res.message)
						this.getDetail()
					} else {
						this.$utils.showLayer(res.message)
						this.$refs.popup.close()
					}
				})
			},
			arriveAddress(){ //确认到达
				this.$utils.requert({
					url: 'carUseStatus',
					type: 'post',
					data: {carUseId: this.id}
				}).then(res => {
					if (res.code === 1) {
						this.$utils.showLayer(res.message)
						this.getDetail()
					} else {
						this.$utils.showLayer(res.message)
						this.$refs.popup.close()
					}
				})
			},
			goOn(){ //上车
				this.$utils.requert({
					url: 'carUserOn',
					type: 'post',
					data: {carUseId: this.id}
				}).then(res => {
					if (res.code === 1) {
						this.$utils.showLayer(res.message)
						this.getDetail()
					} else {
						this.$utils.showLayer(res.message)
						this.$refs.popup.close()
					}
				})
			},
			orderGrabbing(){//抢单
				this.$refs.popup.open()
			},
			close(done) { //取消
				done()
			},
			confirm(done,value){ //确认接单
				let data = {
					carUseId: this.obj.id,
				}
				this.$utils.requert({
					url: 'driverAccept',
					type: 'post',
					data: data
				}).then(res => {
					if (res.code === 1) {
						this.$utils.showLayer(res.message)
					} else {
						this.$utils.showLayer(res.message)
						this.$refs.popup.close()
					}
				})
			},
			call(){ //打电话
				uni.makePhoneCall({
				    phoneNumber: this.obj.phone
				});
			},
			goto(type){
				uni.removeStorageSync('urls')
				let latitude = ''
				let longitude = ''
				let address = ''
				if (type > 1) { //目的地
					latitude = this.obj.goDimension 
					longitude = this.obj.goLongitude 
					address = this.obj.goArea 
				} else {//出发地
					latitude = this.obj.leaveDimension 
					longitude = this.obj.leaveLongitude 
					address = this.obj.leaveArea 
				}
				let url = "http://api.map.baidu.com/marker?location="+latitude+","+longitude+"&title="+address+"&content="+address+"&output=html"
				uni.setStorageSync('urls',url)
				uni.navigateTo({
					url:'/pages/fullTimeJob/testNavigation/testNavigation'
				})
			},
			getDetail(){
				this.$utils.requert({
					url: 'carUseDetail',
					type: 'get',
					data: {carUseId:this.id}
				}).then(res => {
					if (res.code === 1) {
						console.log(res)
						this.obj = res.data
					} else {
						this.$utils.showLayer(res.message)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	padding-bottom: 100rpx;
}
.flex_start{
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.common_container{
	width: 100%;
	background-color: #fffbee;
	padding:36rpx 24rpx;
	font-size: 25rpx;
	color:#FB8408;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	.icon{
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
}
.center{
	padding: 0 28rpx 50rpx;
}
.m_bottom{
	margin-bottom: 112rpx;
}
.footer_box{
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 112rpx;
	background: white;
	border-top:2rpx solid rgba(238,238,238,1);
	.entrance{
		flex: 1;
		justify-content: space-around;
		color: #838282;
		font-size: 24rpx;
		.index_icon{
			width: 40rpx;
			height: 40rpx;
			display: block;
			margin: 0 auto;
		}
		.customer_service{
			width: 38rpx;
			height: 40rpx;
			display: block;
			margin: 0 auto;
		}
	}
	.btn{
		justify-content: center;
		width: 270rpx;
		color: white;
		font-size: 34rpx;
		height: 112rpx;
	}
	.flex_all{
		width: 540rpx;
	}
	.call{
		background:linear-gradient(90deg,rgba(255,149,3,1),rgba(255,197,0,1));
	}
	.flex_1{
		width: 540rpx;
	}
	.right_now{
		background:linear-gradient(-90deg,rgba(255,119,1,1),rgba(255,74,0,1));
	}
}
.grabbing_box{
	justify-content: space-between;
	.grabbing{
		justify-content: center;
		font-size: 28rpx;
		color: white;
		width:136rpx;
		height:53rpx;
		background:linear-gradient(-90deg,rgba(255,160,8,1),rgba(255,131,5,1));
		border:2rpx solid rgba(249,160,42,1);
		border-radius:7rpx;
	}
}
.hot_title{
	height: 122rpx;
	color: #333333;
	font-size: 32rpx;
	border-bottom: 2rpx solid #E1E1E1;
}
.line_seat{
	width: 100%;
	height: 18rpx;
	background: #F6F6F5;
}
.requirement_img{
	width: 100%;
	height: 100%;
	background: #CCCCCC;
}
.requirement{
	color:#323232;
	font-size: 28rpx;
	margin: 30rpx 0 28rpx;
	font-weight: 500;
}
.subhead{
	font-weight: 500;
	color: #323232;
	font-size: 32rpx;
	.tips_icon{
		width: 32rpx;
		height: 32rpx;
		margin-left: 8rpx;
	}
}
.order_info{
	color: #838282;
	font-size: 24rpx;
	padding: 50rpx 0 56rpx;
	margin-bottom: 48rpx;
	border-bottom: 2rpx solid #E1E1E1;
	.address_box{
		flex-wrap: wrap;
	}
	.address_icon{
		height: 40rpx;
		width: 32rpx;
		margin-right: 15rpx;
		flex-shrink: 0;
	}
	.info_title{
		font-weight: 500;
		color: #323232;
		font-size: 32rpx;
		margin-bottom: 24rpx;
		align-items: flex-start;
	}
	.info_tag{
		margin: 34rpx 0;
		font-size: 24rpx;
		.tag_item{
			justify-content: center;
			border: 2rpx solid #CECECE;
			padding: 7rpx 8rpx;
			margin-right: 16rpx;
		}
	}
	.go{
		margin-left: 15rpx;
	}
	.info_price{
		color: #FD9103;
		font-size: 38rpx;
		.company{
			font-size: 28rpx;
		}
	}
}
.recommend_area{
	margin-bottom: 0;
	.info_title{
		justify-content: space-between;
		align-items: flex-start;
		.del_icon{
			width: 14rpx;
			height: 14rpx;
			position: relative;
			top: 16rpx;
			flex-shrink: 0;
			margin-left: 50rpx;
		}
	}
}
</style>
